<template>
  <div>
    <img src="@/assets/img/classroom1.png" alt="" style="padding-left: 180px">
  </div>
  <div class="el-news">
    <div class="el-breadcrumb">
      <el-breadcrumb style="line-height: 64px" :separator-icon="ArrowRight">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>新闻</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
  </div>
  <div>
    <div class="el-data">
      <!--数据显示区域-->
      <div class="data">
        <el-table :data="allNews"
                  style="width: 44%"
                  @row-click="handleTableRow">
          <el-table-column prop="newsTittle" label="名称" width="550" :show-overflow-tooltip="true" />
          <el-table-column prop="newsPublishTime" label="日期" width="110" align="center"></el-table-column>
        </el-table>
      </div>
    </div>
    <div >
      <!-- 分页栏目-->
      <el-pagination
          style="padding-left: 530px;padding-bottom: 50px"
          v-model:currentPage="currentpage"
          :page-sizes="[2, 5, 10, 20]"
          :pager-count="11"
          layout="sizes,prev, pager, next"
          :total="totalSize"
          @current-change="handlePageChange"
          @size-change="handlePageSizeChange"
      />
    </div>

  </div>
</template>

<script>
import { ArrowRight } from '@element-plus/icons-vue'
import {onMounted, ref} from "vue"
import {getAllNewsByPage} from "@/api/news.js"
import router from "@/router";
export default {
  name: "Lists",
  setup() {
    const allNews = ref()
    const newssLength = ref()
    const totalSize = ref()
    const currentpage =ref(1)
    const pagesize=ref(10)

    onMounted(() => {
      getAllNewsByPage(currentpage.value, pagesize.value).then((response) => {
        const data = response.data.data.list
        totalSize.value = response.data.data.total
        allNews.value = data
        newssLength.value = data.length
        console.log(allNews.value)
      })
    })
    return {
      currentpage,
      totalSize,
      pagesize,
      newssLength,
      allNews,
      ArrowRight
    }

  },
  methods:{
    handlePageChange(currentPage){
      this.currentpage=currentPage
      this.queryData()
    },
    handlePageSizeChange(currentSize){
      this.pagesize=currentSize
      this.queryData()
    },
    async queryData(){
      let res = await getAllNewsByPage(this.currentpage, this.pagesize);
      this.allNews = res.data.data.list || [];
    },

    handleTableRow(row, column, event){
      router.push({path:'/newsDetail',query:{
          id:row.newsId
        }})
    }

  }
}

</script>

<style scoped lang="less">
.el-news{
  margin-bottom: 30px;
  margin-left: 300px;
  margin-right: 400px;
  .el-breadcrumb{
    width: 870px;
    height: 64px;

  }
}
.el-table{
  margin-bottom: 80px;
  margin-left: 300px;
  margin-right: 400px;
}

</style>
